<template>
  <div class="MV">
    <MVIndexs @getAllMVs="getAllMVs"></MVIndexs>
    <MVsList :allMVs="allMVs"></MVsList>
  </div>
</template>

<script>
import MVIndexs from "./MVIndexs"
import MVsList from "./MVsList"

import { getAllMVs } from "../../../network/home"

export default {
  name: "MV",
  components: {
    MVIndexs,
    MVsList,
  },
  data() {
    return {
      allMVs: [],
      isload: false,
      limit: 20,
      offset: 0,
      area: "全部",
      type: "全部",
      order: "全部",
    }
  },
  mounted() {
    window.addEventListener('scroll', this.loadSonger, true); // 滚动到底部，再加载的处理事件
  },
  methods: {
    getAllMVs(limit, offset, area, type, order) {
      //判断用户有无点击分类 initidal type area
      if ((this.area == area) && (this.type == type) && (this.order == order)) {
        this.isload = true;
      } else {
        this.area = area;
        this.type = type;
        this.order = order;
        this.isload = false;
      }

      getAllMVs(limit, offset, area, type, order).then(res => {
        //console.log(res.data);
        if (this.isload) {//判断是否为第一次请求
          for (let i = 0; i < res.data.data.length; i++) {
            this.allMVs.push({
              id: res.data.data[i].id,
              picUrl: res.data.data[i].cover,
              name: res.data.data[i].name,
              songer: this.formatSonger(res.data.data[i].artists),
              songerId: res.data.data[i].artistId,
              playCount: res.data.data[i].playCount,
            })
          }
        } else {
          this.allMVs = [];
          for (let i = 0; i < res.data.data.length; i++) {
            this.allMVs.push({
              id: res.data.data[i].id,
              picUrl: res.data.data[i].cover,
              name: res.data.data[i].name,
              songer: this.formatSonger(res.data.data[i].artists),
              songerId: res.data.data[i].artistId,
              playCount: res.data.data[i].playCount,
            })
          }
          this.isload = true;
        }
      })
    },
    formatSonger(songer) {
      let result = [];
      for (let i in songer) {
        result.push(songer[i].name)
      }
      return result.join("/");
    },
    loadSonger() {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//滚动高度
      let clientHeight = document.documentElement.clientHeight;//可视部分高度
      let scrollHeight = document.documentElement.scrollHeight;//所有内容高度
      if (scrollTop + clientHeight + 1 >= scrollHeight) { // 滚动到底部，逻辑代码
        //事件处理
        this.offset += this.limit;
        this.limit = 8;
        this.getAllMVs(this.limit, this.offset, this.area, this.type, this.order);
      }
    }
  }
}
</script>

<style scoped>
</style>